<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Product</title>
    <link rel="stylesheet" href="../lib/bootstrap/css/bootstrap.min.css">
    <style>
        body {
            padding-top: 50px;
        }
    </style>
</head>
<body>

<div class="container">
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand">Smart Sample</a>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <!--<li><a href="https://cas:8443/logout">Logout</a></li>-->
                </ul>
            </div>
        </div>
    </nav>
    <div class="page-header">
        <h1>Product</h1>
    </div>
    <table id="product_table" class="table table-bordered table-hover">
        <thead>
            <tr>
                <th>Product Name</th>
                <th>Product Code</th>
                <th>Price</th>
                <th>Description</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

<script id="product_tr" type="text/x-jquery-tmpl">
    <tr>
        <td>${name}</td>
        <td>${code}</td>
        <td>${price}</td>
        <td>${description}</td>
    </tr>
</script>

<script src="../lib/jquery/jquery.min.js"></script>
<script src="../lib/bootstrap/js/bootstrap.min.js"></script>
<script src="../lib/jquery-form/jquery.form.min.js"></script>
<script src="../lib/jquery-tmpl/jquery.tmpl.min.js"></script>

<script type="text/javascript">
    $(function() {
        $.ajax({
            url: 'http://server:8080/rest-server/rest/ProductService/products',
            type: 'GET',
            dataType: 'jsonp',
            success: function(data) {
                $('#product_tr').tmpl(data).appendTo('#product_table tbody');
            }
        });
    });
</script>

</body>
</html>